<div class="main-container" id="main-container">
            <script type="text/javascript">
                try{ace.settings.check('main-container' , 'fixed')}catch(e){}
            </script>

            <div class="main-container-inner">
                <a class="menu-toggler" id="menu-toggler" href="#">
                    <span class="menu-text"></span>
                </a>



                   <?php $this->partial("shared/menu") ?>


                <div class="main-content">
                    <div class="breadcrumbs" id="breadcrumbs">
                        <script type="text/javascript">
                            try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
                        </script>

                        <ul class="breadcrumb">
                            <li>
                                <i class="icon-home home-icon"></i>
                                <a href="#">Home</a>
                            </li>

                            <li>
                                <a href="#">Forms</a>
                            </li>
                            <li class="active">Wizard &amp; Validation</li>
                        </ul><!-- .breadcrumb -->

                        <div class="nav-search" id="nav-search">
                            <form class="form-search">
                                <span class="input-icon">
                                    <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
                                    <i class="icon-search nav-search-icon"></i>
                                </span>
                            </form>
                        </div><!-- #nav-search -->
                    </div>

                    <div class="page-content">

                        <div class="row">
                            <div class="col-xs-12">
                                <!-- PAGE CONTENT BEGINS -->



                                <div class="row-fluid">
                                    <div class="span12">
                                        <div class="widget-box">
                                            <div class="widget-header widget-header-blue widget-header-flat">
                                                <h4 class="lighter">New Item Wizard</h4>

                                                <div class="widget-toolbar">
                                                    <label>
                                                        <small class="green">
                                                            <b>Validation</b>
                                                        </small>

                                                        <input id="skip-validation" type="checkbox" class="ace ace-switch ace-switch-4" />
                                                        <span class="lbl"></span>
                                                    </label>
                                                </div>
                                            </div>

                                            <div class="widget-body">
                                                <div class="widget-main">

                                                    <div class="step-content row-fluid position-relative" id="step-container">
                                                        <div class="step-pane active" id="step1">



                                                            <form class="form-horizontal" id="validation-form" method="get" action="/admin_member/insert">

                                                                <div class="form-group">
                                                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="email">帐号:</label>

                                                                    <div class="col-xs-12 col-sm-9">
                                                                        <div class="clearfix">
                                                                            <input type="text" name="username" id="username" class="col-xs-12 col-sm-6" />
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="form-group">
                                                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="email">Email:</label>

                                                                    <div class="col-xs-12 col-sm-9">
                                                                        <div class="clearfix">
                                                                            <input type="email" name="email" id="email" class="col-xs-12 col-sm-6" />
                                                                        </div>
                                                                    </div>
                                                                </div>

\

                                                                <div class="form-group">
                                                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="password">密码:</label>

                                                                    <div class="col-xs-12 col-sm-9">
                                                                        <div class="clearfix">
                                                                            <input type="password" name="password" id="password" class="col-xs-12 col-sm-4" />
                                                                        </div>
                                                                    </div>
                                                                </div>



                                                                <div class="form-group">
                                                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="password2">密码确认:</label>

                                                                    <div class="col-xs-12 col-sm-9">
                                                                        <div class="clearfix">
                                                                            <input type="password" name="password2" id="password2" class="col-xs-12 col-sm-4" />
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="hr hr-dotted"></div>

                                                                <div class="form-group">
                                                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="name">Company Name:</label>

                                                                    <div class="col-xs-12 col-sm-9">
                                                                        <div class="clearfix">
                                                                            <input type="text" id="name" name="name" class="col-xs-12 col-sm-5" />
                                                                        </div>
                                                                    </div>
                                                                </div>


                                                                <div class="form-group">
                                                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="phone">Phone Number:</label>

                                                                    <div class="col-xs-12 col-sm-9">
                                                                        <div class="input-group">
                                                                            <span class="input-group-addon">
                                                                                <i class="icon-phone"></i>
                                                                            </span>

                                                                            <input type="tel" id="phone" name="phone" />
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="space-2"></div>

                                                                <div class="form-group">
                                                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="url">Company URL:</label>

                                                                    <div class="col-xs-12 col-sm-9">
                                                                        <div class="clearfix">
                                                                            <input type="url" id="url" name="url" class="col-xs-12 col-sm-8" />
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="hr hr-dotted"></div>

                                                                <div class="form-group">
                                                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right">Subscribe to</label>

                                                                    <div class="col-xs-12 col-sm-9">
                                                                        <div>
                                                                            <label>
                                                                                <input name="subscription" value="1" type="checkbox" class="ace" />
                                                                                <span class="lbl"> Latest news and announcements</span>
                                                                            </label>
                                                                        </div>

                                                                        <div>
                                                                            <label>
                                                                                <input name="subscription" value="2" type="checkbox" class="ace" />
                                                                                <span class="lbl"> Product offers and discounts</span>
                                                                            </label>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="space-2"></div>

                                                                <div class="form-group">
                                                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right">性别</label>

                                                                    <div class="col-xs-12 col-sm-9">

                                                                        <?php foreach ($genderOptions as $genderId => $genderName):?>
                                                                        <div>
                                                                            <label class="blue">
                                                                                <input name="gender" value="<?php echo $genderId;?>" type="radio" class="ace"/>
                                                                                <span class="lbl">&nbsp;<?php echo $genderName;?></span>
                                                                            </label>
                                                                        </div>
                                                                        <?php endforeach;?>

                                                                    </div>
                                                                </div>

                                                                <div class="hr hr-dotted"></div>

                                                                <div class="form-group">
                                                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="state">State</label>

                                                                    <div class="col-xs-12 col-sm-9">
                                                                        <select id="state" name="state" class="select2" data-placeholder="Click to Choose...">
                                                                            <option value="">&nbsp;</option>
                                                                            <option value="AL">Alabama</option>
                                                                            <option value="AK">Alaska</option>
                                                                            <option value="AZ">Arizona</option>
                                                                            <option value="AR">Arkansas</option>
                                                                            <option value="CA">California</option>
                                                                            <option value="CO">Colorado</option>
                                                                            <option value="CT">Connecticut</option>
                                                                            <option value="DE">Delaware</option>
                                                                            <option value="FL">Florida</option>
                                                                            <option value="GA">Georgia</option>
                                                                            <option value="HI">Hawaii</option>
                                                                            <option value="ID">Idaho</option>
                                                                            <option value="IL">Illinois</option>
                                                                            <option value="IN">Indiana</option>
                                                                            <option value="IA">Iowa</option>
                                                                            <option value="KS">Kansas</option>
                                                                            <option value="KY">Kentucky</option>
                                                                            <option value="LA">Louisiana</option>
                                                                            <option value="ME">Maine</option>
                                                                            <option value="MD">Maryland</option>
                                                                            <option value="MA">Massachusetts</option>
                                                                            <option value="MI">Michigan</option>
                                                                            <option value="MN">Minnesota</option>
                                                                            <option value="MS">Mississippi</option>
                                                                            <option value="MO">Missouri</option>
                                                                            <option value="MT">Montana</option>
                                                                            <option value="NE">Nebraska</option>
                                                                            <option value="NV">Nevada</option>
                                                                            <option value="NH">New Hampshire</option>
                                                                            <option value="NJ">New Jersey</option>
                                                                            <option value="NM">New Mexico</option>
                                                                            <option value="NY">New York</option>
                                                                            <option value="NC">North Carolina</option>
                                                                            <option value="ND">North Dakota</option>
                                                                            <option value="OH">Ohio</option>
                                                                            <option value="OK">Oklahoma</option>
                                                                            <option value="OR">Oregon</option>
                                                                            <option value="PA">Pennsylvania</option>
                                                                            <option value="RI">Rhode Island</option>
                                                                            <option value="SC">South Carolina</option>
                                                                            <option value="SD">South Dakota</option>
                                                                            <option value="TN">Tennessee</option>
                                                                            <option value="TX">Texas</option>
                                                                            <option value="UT">Utah</option>
                                                                            <option value="VT">Vermont</option>
                                                                            <option value="VA">Virginia</option>
                                                                            <option value="WA">Washington</option>
                                                                            <option value="WV">West Virginia</option>
                                                                            <option value="WI">Wisconsin</option>
                                                                            <option value="WY">Wyoming</option>
                                                                        </select>
                                                                    </div>
                                                                </div>

                                                                <div class="space-2"></div>

                                                                <div class="form-group">
                                                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="platform">Platform</label>

                                                                    <div class="col-xs-12 col-sm-9">
                                                                        <div class="clearfix">
                                                                            <select class="input-medium" id="platform" name="platform">
                                                                                <option value="">------------------</option>
                                                                                <option value="linux">Linux</option>
                                                                                <option value="windows">Windows</option>
                                                                                <option value="mac">Mac OS</option>
                                                                                <option value="ios">iOS</option>
                                                                                <option value="android">Android</option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="space-2"></div>

                                                                <div class="form-group">
                                                                    <label class="control-label col-xs-12 col-sm-3 no-padding-right" for="comment">Comment</label>

                                                                    <div class="col-xs-12 col-sm-9">
                                                                        <div class="clearfix">
                                                                            <textarea class="input-xlarge" name="comment" id="comment"></textarea>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="space-8"></div>

                                                                <div class="form-group">
                                                                    <div class="col-xs-12 col-sm-4 col-sm-offset-3">
                                                                        <label>
                                                                            <input name="agree" id="agree" type="checkbox" class="ace" />
                                                                            <span class="lbl"> I accept the policy</span>
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>


                                                    </div>

                                                         <div class="clearfix form-actions">
                                                        <div class="col-md-offset-3 col-md-9">
                                                            <button type="button" class="btn btn-info" onclick="$('#validation-form').submit();">
                                                                <i class="icon-ok bigger-110"></i>
                                                                Submit
                                                            </button>

                                                            &nbsp; &nbsp; &nbsp;
                                                            <button type="reset" class="btn">
                                                                <i class="icon-undo bigger-110"></i>
                                                                Reset
                                                            </button>
                                                        </div>
                                                    </div>

                                                </div><!-- /widget-main -->
                                            </div><!-- /widget-body -->
                                        </div>
                                    </div>
                                </div>


                            </div><!-- /.col -->
                        </div><!-- /.row -->
                    </div><!-- /.page-content -->
                </div><!-- /.main-content -->

                <div class="ace-settings-container" id="ace-settings-container">
                    <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
                        <i class="icon-cog bigger-150"></i>
                    </div>

                    <div class="ace-settings-box" id="ace-settings-box">
                        <div>
                            <div class="pull-left">
                                <select id="skin-colorpicker" class="hide">
                                    <option data-skin="default" value="#438EB9">#438EB9</option>
                                    <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                                    <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                                    <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                                </select>
                            </div>
                            <span>&nbsp; Choose Skin</span>
                        </div>

                        <div>
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
                            <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
                        </div>

                        <div>
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
                            <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
                        </div>

                        <div>
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
                            <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
                        </div>

                        <div>
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
                            <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
                        </div>

                        <div>
                            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
                            <label class="lbl" for="ace-settings-add-container">
                                Inside
                                <b>.container</b>
                            </label>
                        </div>
                    </div>
                </div><!-- /#ace-settings-container -->
            </div><!-- /.main-container-inner -->

            <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
                <i class="icon-double-angle-up icon-only bigger-110"></i>
            </a>
        </div><!-- /.main-container -->

        <!-- basic scripts -->

        <!--[if !IE]> -->

        <script type="text/javascript">
            window.jQuery || document.write("<script src='/assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
        </script>

        <!-- <![endif]-->

        <!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='/assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->

        <script type="text/javascript">
            if("ontouchend" in document) document.write("<script src='/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
        </script>
        <script src="/assets/js/bootstrap.min.js"></script>
        <script src="/assets/js/typeahead-bs2.min.js"></script>

        <!-- page specific plugin scripts -->

        <script src="/assets/js/fuelux/fuelux.wizard.min.js"></script>
        <script src="/assets/js/jquery.validate.min.js"></script>
        <script src="/assets/js/additional-methods.min.js"></script>
        <script src="/assets/js/bootbox.min.js"></script>
        <script src="/assets/js/jquery.maskedinput.min.js"></script>
        <script src="/assets/js/select2.min.js"></script>

        <!-- ace scripts -->

        <script src="/assets/js/ace-elements.min.js"></script>
        <script src="/assets/js/ace.min.js"></script>

        <!-- inline scripts related to this page -->

        <script type="text/javascript">
            jQuery(function($) {

                //documentation : http://docs.jquery.com/Plugins/Validation/validate

                $.mask.definitions['~']='[+-]';
                $('#phone').mask('(999) 999-9999');

                jQuery.validator.addMethod("phone", function (value, element) {
                    return this.optional(element) || /^\(\d{3}\) \d{3}\-\d{4}( x\d{1,6})?$/.test(value);
                }, "Enter a valid phone number.");

                $('#validation-form').validate({
                    errorElement: 'div',
                    errorClass: 'help-block',
                    focusInvalid: false,
                    rules: {
                         username: {
                            required: true,
                            minlength: 4,
                            maxlength: 20
                        },
                        email: {
                            required: true,
                            email:true
                        },
                        password: {
                            required: true,
                            minlength: 5
                        },
                        password2: {
                            required: true,
                            minlength: 5,
                            equalTo: "#password"
                        },
                        name: {
                            required: true
                        },
                        phone: {
                            required: true,
                            phone: 'required'
                        },
                        url: {
                            required: true,
                            url: true
                        },
                        comment: {
                            required: true
                        },
                        state: {
                            required: true
                        },
                        platform: {
                            required: true
                        },
                        subscription: {
                            required: true
                        },
                        gender: 'required',
                        agree: 'required'
                    },

                    messages: {
                        username: {
                            required: "会员登陆帐号为必填写项",
                            minlength: "会员登陆帐号最小长度为4位字符",
                            maxlength: "会员登陆帐号最大长度为20位字符"
                        },

                        email: {
                            required: "请输入会员的邮箱",
                            email: "请输入正确的会员邮箱"
                        },
                        password: {
                            required: "Please specify a password.",
                            minlength: "Please specify a secure password."
                        },
                        subscription: "Please choose at least one option",
                        gender: "请选择相应的性别",
                        agree: "Please accept our policy"
                    },

                    invalidHandler: function (event, validator) { //display error alert on form submit
                        $('.alert-danger', $('.login-form')).show();
                    },

                    highlight: function (e) {
                        $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                    },

                    success: function (e) {
                        $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
                        $(e).remove();
                    },

                    errorPlacement: function (error, element) {
                        if(element.is(':checkbox') || element.is(':radio')) {
                            var controls = element.closest('div[class*="col-"]');
                            if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
                            else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                        }
                        else if(element.is('.select2')) {
                            error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                        }
                        else if(element.is('.chosen-select')) {
                            error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                        }
                        else error.insertAfter(element.parent());
                    },

                    submitHandler: function (form) {
                    },
                    invalidHandler: function (form) {
                    }
                });




            })
        </script>